/** * @des: 智能侦测 * @author: 刘清华 * @date: 2022/11/2 */
<template>
  <Panel title="智能侦测" class="detection" v-bind="props.config">
    <!-- 列表头部部分 -->
    <div class="header-wrapper">
      <span
        class="header-item"
        v-for="(item, index) in intelligentConfig"
        :key="index"
        :class="state.activeSwitchIndex == index && 'active'"
        @click="switchTab(item, index)"
      >
        <span class="text">
          {{ item.title }}
          <span class="count" v-show="state.statisticsCounts[item.type] > 0">{{
            state.statisticsCounts[item.type] > 99 ? '99+' : state.statisticsCounts[item.type]
          }}</span>
        </span></span
      >
    </div>

    <!-- 列表部分 -->
    <div :class="{ content: true, 'content-shadow': !!intelligentConfig.length }">
      <a-spin class="spin-loading" v-if="state.loading" />

      <div class="content-rows" v-else-if="state.list.length">
        <TransitionGroup name="list" tag="div">
          <div
            v-for="(item) in state.list"
            :class="activeId === item.onlyId ? 'row row-active' : 'row'"
            :key="item.onlyId"
            :id="item.onlyId"
            @click="handlerRowClick(item)"
          >
            <div class="content-box">
              <!-- svg部分  start-->
              <!-- ai监测 -->
              <svg-icon icon-class="aijc-car" class="svg-box" v-if="computedActiveIntelligent.type == 1" />
              <!-- 协同上报 -->
              <svg-icon
                :icon-class="congestion[item.infoType]"
                class="svg-box"
                v-else-if="computedActiveIntelligent.type == 2"
              />
              <!-- 第三方 -->
              <svg-icon icon-class="dsf" class="svg-box" v-else-if="computedActiveIntelligent.key === 'dsf'" />

              <!-- 相邻路段 -->
              <svg-icon icon-class="xlld" class="svg-box" v-else-if="computedActiveIntelligent.type === 4" />

              <svg-icon icon-class="xtsb-lu" class="svg-box" v-else />

              <!-- svg部分  end-->
              <!-- <span class="describe"> -->
              <a-tag color="#5c8ff5" v-if="computedActiveIntelligent.key == 'xlld'">{{ item.unitName || '' }}</a-tag>
              <a-tag color="blue">{{ dayjs(item.monitorTime).format('HH:mm') }}</a-tag>
              <a-tag color="green" class="road-num">{{ item.roadNum }}{{ item.roadName }}</a-tag>
              <!-- 文本 -->
              <span class="row-text">{{ item.text }}</span>

              <!-- </span> -->
            </div>
            <!-- 操作览 -->
            <div class="row-operates-box">
              <a-button
                class="btn"
                v-show="computedActiveIntelligent.rowOperatesText"
                @click.stop="handlerRowClick(item, computedActiveIntelligent.rowOperatesText)"
              >
                {{ computedActiveIntelligent.rowOperatesText }}
              </a-button>
            </div>
          </div>
        </TransitionGroup>
      </div>

      <div v-else class="empty-box">
        <div class="empty">
          <Empty />
        </div>
      </div>
    </div>

    <!-- 相邻路线忽略模态框 -->
    <ModelPanel
      title="忽略"
      :showClose="false"
      :visible="ignorevisible"
      @handleOk="ignoreHandlerOk"
      @cancel="ignoreCancel"
    >
      <div class="tip-text">确认忽略吗?</div>
    </ModelPanel>
  </Panel>
</template>

<script>
export default {
  name: 'Intelligent'
}
</script>

<script setup>
import Panel from '../../components/panel'
import {
  getStatisticsCount,
  getDetectionList,
  operateMisinformationIgnore,
  getThirdList
} from '@/views/business-component/api/intelligent.js'
import { ignoreType } from '../../config/intelligent'
import {
  ref,
  onMounted,
  reactive,
  defineEmits,
  defineProps,
  computed,
  getCurrentInstance,
  watch,
  shallowRef,
  nextTick,
  onUnmounted
} from 'vue'
import { useStore } from 'vuex'
import intelligent from '../../config/intelligent'
import Empty from '../../components/empty'
import ModelPanel from '../../components/model-panel'
import useMapOperates from '@/hooks/useMapOperates'
import baseServiceApi from '../../api/base-service'
import dayjs from 'dayjs'
import { get } from '@/utils'
import { getEventTypeConfig } from '@/core/config'
import { lineColors } from '../../config/traffic'
import { getDict } from '@/core/dictionaries'
import useComputedDistanceRow from '@/hooks/useComputedDistanceRow'
import * as authAPI from '@/api/auth'
import config from '@/config'

const store = useStore()

// 当前store的主键
const activeId = computed(() => store.state.config.detailConfig.data ? store.state.config.detailConfig.data.onlyId : '')
const intelligentData = computed(() => store.state.config.detailConfig.data)
const handleDarw = useMapOperates()
// 交通态势拥堵情况 轻度、中度、重度、预警
const congestion = ref({
  轻度拥堵: 'jtts-qing',
  中度拥堵: 'jtts-center',
  重度拥堵: 'jtts-zhong'
})
const props = defineProps({
  // 详情配置
  config: {
    type: Object,
    default: () => ({})
  }
})
const emit = defineEmits(['setDetail', 'close'])
const { proxy } = getCurrentInstance()

// 忽略模态框的显隐
const ignorevisible = shallowRef(false)

// store 计算属性
const computedState = computed(() => ({
  roadType: store.state.config.roadType,
  areaCode: store.state.config.areaCode,
  isProvince: store.state.config.isProvince
}))
const intelligentConfig = ref([]) // 所有有权限的智能侦测tab配置列表

watch(
  computedState,
  () => {
    intelligentConfig.value.length && getData()
  },
  { deep: true }
)

const state = reactive({
  list: [], // 列表数据
  activeSwitchIndex: 0,
  activeRowId: null,
  statisticsCounts: {},
  loading: true
})

const iconType = computedState.value.roadType === 2 ? 'gl' : 'gs'

// 当前选中的智能侦测配置
const computedActiveIntelligent = computed(() => intelligentConfig.value[state.activeSwitchIndex] || {})

const getDataTimer = ref(null)
const trafficTimer = ref(null)

onMounted(() => {
  init()
})
onUnmounted(() => {
  trafficTimer.value && clearInterval(trafficTimer.value)
})

// 初始化
function init() {
  dynamicRenderTab().then(async () => {
    await getData()
    proxy.$bus.on('viewCheck', onViewCheck)
    proxy.$bus.on('overGetList', overGetList) // 重新获取列表
    intervalUpdate()
  })
}
/**
 * @description 获取qs的权限动态渲染tab
 *
 * **/
function dynamicRenderTab() {
  const QS_YXJC_KEY = 'APP:YXJC' // 运行监测在QS的key
  const ignoreStart = '#' // 以何处开始忽略
  return new Promise((resolve, rejecte) => {
    authAPI
      .getAllPrivilege({
        userId: get(store.state, 'user.userInfo.userId'),
        appCode: config.appCode
      })
      .then(res => {
        // qs根节点
        const rootNodeAuth = get(res, 'data.chileM', []).filter(i => (i.code || '').includes(QS_YXJC_KEY))
        // 运行监测节点
        const yxjcAuth = get(rootNodeAuth, '0.chileM', []).map(i => {
          const sliceIndex = (i.code || '').indexOf(ignoreStart)
          return sliceIndex > -1 ? i.code.slice(0, sliceIndex) : i.code
        })
        intelligentConfig.value = intelligent.filter(i => yxjcAuth.includes(i.qsCode))
        resolve(yxjcAuth || [])
      })
      .catch(() => reject([]))
  })
}

/**
 * @description 获取列表数据
 */
function getData(data) {
  getCounts()

  state.loading = true
  return new Promise((resolve, reject) => {
    if (getDataTimer.value) clearTimeout(getDataTimer.value)
    getDataTimer.value = setTimeout(() => {
      if (computedActiveIntelligent.value.key === 'dsf') {
        // 亿科达第三方数据
        getThirdList({
          deptId: get(store, 'state.user.userInfo.orgInfos.0.orgId')
        })
          .then(res => {
            if (data && computedActiveIntelligent.value.key != data.key) return
            state.list = (res.data || []).map((i, index) => {
              const startStakeK = i.startStakeK ? 'K' + i.startStakeK : ''
              const startStakeM = i.startStakeM || ''
              return {
                ...i,
                onlyId: i.detectionId + index,
                text: `${startStakeK}+${startStakeM} ${i.eventType || ''}`,
                hoverText: `${startStakeK}+${startStakeM}`
              }
            })
          })
          .finally(() => {
            state.loading = false
          })

        return
      }

      const params = {
        detectionClassify: computedActiveIntelligent.value.type,
        roadType: computedState.value.roadType,
        province: 32,
        city: computedState.value.isProvince ? null : computedState.value.areaCode,
        deptId: get(store, 'state.user.userInfo.orgInfos.0.orgId'), // '8a819e536521ad6f0165994f55130033' ||,
        companyType: get(store.state, 'user.bussinessType')
      }

      getDetectionList(params)
        .then(response => {
          state.loading = false
          if (data && computedActiveIntelligent.value.key != data.key) return
          // console.log('智能侦测列表数据', computedActiveIntelligent.value.key != data.key)
          if (response.code == 200) {
            state.list = (response.data || []).map((i, index) => {
              i.onlyId = i.detectionId + index
              let alertTypeText = ''
              // const roadDirection = i.roadDirection || ''
              const startStakeK = i.startStakeK ? 'K' + i.startStakeK : ''
              const startStakeM = i.startStakeM ? '+' + i.startStakeM : ''
              const endStakeK = i.endStakeK ? '-K' + i.endStakeK : ''
              const endStakeM = i.endStakeM ? '+' + i.endStakeM : ''
              i.startPile = i.startStakeK + '.' + i.startStakeM
              i.endPile = i.endStakeK + '.' + i.endStakeM
              // i.dataSource = dataSource.value[i.dataSource] || i.dataSource
              if (computedActiveIntelligent.value.key == 'aijc') {
                const _alertType = getDict('ZNZC-AI-EVENTTYPE', i.alertType, '') || ''
                alertTypeText = _alertType ? ` 监测到${_alertType}` : ''
              } else if (computedActiveIntelligent.value.key == 'jtts') {
                alertTypeText = ` 发生了${i.infoType}，拥堵长度${i.jamDistance}米`
              } else if (computedActiveIntelligent.value.key == 'xtsb') {
                const partyPhoneText = i.partyPhone ? '当事人手机' + i.partyPhone : ''
                const escPhoneText = i.escPhone ? '上报人手机' + i.escPhone : ''
                alertTypeText = `有信息上报，${partyPhoneText} ${escPhoneText}`
              } else if (computedActiveIntelligent.value.key == 'xlld') {
                alertTypeText = `${getDict('DIRECTION', i.roadDirection) || ''} 发生了${getEventTypeConfig(i.eventType).value}`
              }
              i.text = `${startStakeK}${startStakeM}${endStakeK}${endStakeM}${alertTypeText}`
              i.hoverText = `${i.roadNum || ''} ${
                i.roadName || ''
              } ${startStakeK}${startStakeM}${endStakeK}${endStakeM}`
              return i
            })
            state.list = filterTimeList(state.list, 'monitorTime')

            if (computedActiveIntelligent.value.key == 'jtts') {
              state.list = filterCongestionList(state.list)
            }
            resolve()
            return
          }
          state.list = []
          resolve()
        })
        .catch(() => {
          state.loading = false
          state.list = []
          reject()
        })

      clearTimeout(getDataTimer.value)
    }, 500)
  })
}

/*
 * 定时两分钟刷新
 */
function intervalUpdate() {
  trafficTimer.value = setInterval(() => {
    !state.loading &&
      intelligentConfig.value.length &&
      !get(store, 'state.config.detailConfig.data.onlyId') &&
      getData()
  }, 1000 * 2 * 60)
}
/*
 * 按时间倒序排序
 */
function filterTimeList(data, time) {
  if (!data && !data.length) return []
  data.sort(function (a, b) {
    return new Date(b[time]).getTime() - new Date(a[time]).getTime()
  })
  return data
}
/*
 * 按拥堵情况倒序排序
 */
function filterCongestionList(data) {
  if (!Array.isArray(data)) return []
  const mapperCongestion = {
    重度拥堵: 1,
    中度拥堵: 2,
    轻度拥堵: 3
  }
  return data.sort((a, b) => {
    return (mapperCongestion[a.infoType] || 10) - (mapperCongestion[b.infoType] || 10)
  })
}

/*
 * @desc 获取统计数
 */
function getCounts() {
  const params = {
    roadType: computedState.value.roadType,
    deptId: get(store, 'state.user.userInfo.orgInfos.0.orgId'),
    companyType: get(store.state, 'user.bussinessType')
  }
  getStatisticsCount(params)
    .then(({ data }) => {
      console.log('智能侦测统计数据', data)
      state.statisticsCounts = (data || []).reduce((obj, i) => {
        obj[i.name] = Number(i.value || 0)
        return obj
      }, {})
    })
    .catch(() => {})
}

/**
 * 切换tab
 * @param index 下标
 * **/
function switchTab(item, index) {
  if (state.activeSwitchIndex == index) return
  state.activeSwitchIndex = index
  emit('close', { type: 'panel' })

  return getData(item)
}
/**
 * @desc 点击列表操作
 * @param item
 * **/
function handlerRowClick(item, actions) {
  if (actions === '忽略') {
    ignorevisible.value = true
  }
  if (activeId.value === item.onlyId) return

  emit('setDetail', {
    type: 'intelligent',
    actions: computedActiveIntelligent.value,
    data: item,
    config: computedActiveIntelligent.value.title !== '相邻路段' ? props.config.detailConfig : null
    // 相邻路段没有详情
  })

  if ([1, 3, 9, 4].includes(item.detectionClassify)) {
    // AI监测、协同上报 第三方点击后展示的资源
    getBaseResources(item, actions)
  } else if ([2].includes(item.detectionClassify)) {
    // 交通态势点击后展示的资源
    getTrafficSituation(item, actions)
  }
}

/**
 *  展示点位点击后的资源
 *
 ***/
const getBaseResources = (item, actions) => {
  console.log('path', item.path)

  if (item.path && item.path.length && item.path[0] && item.path[0].every(i => i > 0)) {
    getMarkerSxj(item.path)
    proxy.$mapSdk().setMvMapCenterAndZoom([Number(item.path[0][0]), Number(item.path[0][1])], 14)

    // 智能侦测 打点
    nextTick(() => {
      handleDarw('marker', [
        { icon: 'zhdd-gl-znzc', path: item.path[0], name: item.hoverText, size: [30, 35], offset: [-15, -35] }
      ])
    })
  } else {
    // proxy.$message.warn('没有经纬度或经纬度不合法')
  }
}

/**
 *  展示交通态势点击后的资源
 *
 ***/
const getTrafficSituation = (item, actions) => {
  // 打点画线
  const path = (item.path || []).map(i => i)
  const centerPath = path[Math.floor(path.length / 2)]
  centerPath && proxy.$mapSdk().setMvMapCenterAndZoom([Number(centerPath[0]), Number(centerPath[1])], 14)
  const lines = [
    {
      name: item.hoverText,
      path,
      config: {
        lineWidth: 8,
        lineColor: lineColors[item.infoType],
        selectWidth: 10,
        selectColor: lineColors[item.infoType]
      }
    }
  ]

  nextTick(() => {
    lineColors[item.infoType] && handleDarw('polyline', lines)
  })

  const params = {
    roadNum: item.roadNum, //  string 是 示例值：G2说明：路段编号
    startStake: item.startStakeK + '.' + item.startStakeM, //  number 是 示例值：450说明：开始桩号
    endStake: item.endStakeK + '.' + item.endStakeM, //  number 是 示例值：1000说明：结束桩号
    resourceType: null,
    roadSysType: computedState.value.roadType
  }

  // 获取摄像机
  params.resourceType = 6
  getBaseInfo(params, 'sxj', centerPath)
  // 获取情报板
  params.resourceType = 7
  getBaseInfo(params, 'qbb', centerPath)
}

/** *
 * @desc  获取摄像机、情报板并打点
 * @param params  请求参数
 * @param type    类型  6摄像机、7情报板
 *
 ***/
const getBaseInfo = (params, type = 'sxj', centerPath) => {
  const count = type === 'sxj' ? 2 : 1
  // 情报版显示附近一个, 摄像机播放附近两个 打点打所有
  baseServiceApi.getBaseInfoList(params).then(res => {
    if (res.data && res.data.length) {
      const result = useComputedDistanceRow(centerPath, res.data).map(item => {
        return {
          ...item,
          id: item.resourcesId,
          cameraId: item.resourcesId,
          roadType: computedState.value.roadType,
          type,
          // icon: 'zhdd-gl-' + type,
          icon: `zhdd-${iconType}-${type}`,
          path: [item.lng, item.lat],
          name: item.resourcesName,
          hasClickStatus: true,
          size: [30, 35],
          offset: [-15, -35]
        }
      })
      const beforeRows = result.slice(0, count) // 前两个
      if (type === 'sxj') {
        getLineAroundSxj(beforeRows)
        const afterRows = result.slice(count, result.length) // 前两个以后的所有摄像机
        handleDarw('marker', afterRows, { type })
      }
      nextTick(() => {
        handleDarw('marker', result, { type })
      })
    }
  })
}

/**
 * 路线附近两个摄像头
 * @param  data list
 *
 * **/
function getLineAroundSxj(data) {
  const sjxData = data || []
  const promiseList = sjxData.map(i => {
    return baseServiceApi.getCameraUrl({
      cameraId: i.resourcesId,
      videoType: 1,
      roadType: computedState.value.roadType
    })
  })
  Promise.all(promiseList)
    .then(res => {
      res.forEach((i, index) => {
        i.detail && (sjxData[index].url = i.detail)
        if (i.detail) {
          sjxData[index].url = i.detail
          sjxData[index].icon = `zhdd-${iconType}-sxj-active`
        }
      })
    })
    .catch(e => {
      console.log('err', e)
    })
    .finally(() => {
      handleDarw('aroundCamera', sjxData)
    })
}

/**
 * 点位附近摄像机
 * **/
function getMarkerSxj(path) {
  // const _path = path // || [[120.62173935320476, 31.348696499246007]]

  const params = {
    lon: path[0][0],
    lat: path[0][1],
    resourceType: 6
  }
  baseServiceApi.getLonlatInfoList(params).then(res => {
    console.log('res', res)
    const sxtList = useComputedDistanceRow(
      path[0],
      (res.data || []).filter(i => i.roadSysType == computedState.value.roadType).slice(0, 2)
    ) // 获取点位附近的摄像机
    const sxtLists = sxtList
    const promiseList = sxtLists.map(i => {
      return baseServiceApi.getCameraUrl({
        roadType: computedState.value.roadType,
        cameraId: i.resourcesId,
        videoType: 1
      })
    })
    Promise.all(promiseList).then(res => {
      res.forEach((i, index) => {
        if (i.detail) {
          sxtList[index].url = i.detail
        }
      })
      handleDarw('aroundCamera', sxtLists)
    })
  })
}

/** *
 * @desc 监听一二级事件点击核实
 * @param params { Object } 事件详情
 ***/
function onViewCheck(params) {
  const tempId = 'kshdjah129381293h1jk3h10' // 临时的  因为详情的id 在列表匹不到;
  const type = 2 || params.detectionClassify // 先固定切2
  const path = [
    ['119.68020', '32.681590'],
    ['119.68274', '32.674707']
  ]

  if (!params) return
  try {
    // 不是同一侦测类型的情况下
    if (computedActiveIntelligent.value.type !== type) {
      const intelligentIndex = intelligentConfig.value.findIndex(i => i.type === type)
      if (intelligentIndex > -1) {
        switchTab(intelligentIndex).then(() => {
          setTimeout(() => {
            const ele = document.getElementById(tempId)
            ele && ele.scrollIntoView()
            handlerRowClick({ ...params, detectionId: tempId, path }, true)
          }, 600)
        })
      }
    } else {
      // 是同一侦测类型情况下
      setTimeout(() => {
        const ele = document.getElementById(tempId)
        ele && ele.scrollIntoView()
        handlerRowClick({ ...params, detectionId: tempId, path }, true)
      }, 700)
    }
  } catch (e) {
    console.log(e)
  }
}

/**
 * @desc  监听信息确认 确认事件，关联事件,误报,忽略
 *
 * **/
async function overGetList(id, type) {
  if (store.state.config.detailConfig.type == 'intelligent') {
    store.commit('config/SET_DETAIL_CONFIG', {})
    emit('close', { type: 'panel' })
  }
  if (id) {
    const index = state.list.findIndex(i => i.detectionId == id)
    const detectionClassify = get(state.list, `${index}.detectionClassify`)
    state.statisticsCounts[detectionClassify] && state.statisticsCounts[detectionClassify]-- // 角标--
    const nextData = state.list[index + 1] // 下一个数据项
    state.list.splice(index, 1)

    if (nextData) handlerRowClick(nextData)
    else if (state.list && state.list.length) handlerRowClick(state.list[0])
  } else {
    // 重新拉取列表与角标数
    await getData()
  }
}

/**
 * @desc 忽略模态框确认
 *
 * **/
function ignoreHandlerOk() {
  const params = {
    detectionId: intelligentData.value.detectionId, // 智能侦测Id
    unit: store.state.user.userInfo.orgInfos ? store.state.user.userInfo.orgInfos[0].orgId : '',
    operator: store.state.user.userInfo.userId, // 操作人
    userName: store.state.user.userInfo.name,
    detectionType: computedActiveIntelligent.value.type, //  智能侦测类型
    eventSource: intelligentData.value.eventSource, //  事件来源
    happenTime: intelligentData.value.monitorTime, //  发生时间
    endTime: null, //  结束时间
    roadSysType: store.state.config.roadType, //  事件环境变量 0公路 1高速
    roadNum: intelligentData.value.roadNum, // 路线编号
    roadName: intelligentData.value.roadName, // 路线名称
    from: intelligentData.value.startStake, // 开始桩号
    to: intelligentData.value.endStake, // 结束桩号
    projectCode: 'jtqg', // 项目标识说明
    customEventType: '', // 说明自定义事件
    administrativeCode: '', // 地市编码
    remark: '',
    ignoreType: computedActiveIntelligent.value.type,
    alarmType: intelligentData.value.alarmType, //  告警类型
    detectionSituationRequest: {
      districtId: '', // 省市区编码
      distance: intelligentData.value.jamDistance, // 拥堵距离
      duration: intelligentData.value.duration, // 预计通行时间
      amReason: ''
    } //  列表项对象
    // 误报才有 desc
  }

  operateMisinformationIgnore(params)
    .then(res => {
      proxy.$message.success('忽略成功')
      ignorevisible.value = false
      overGetList(intelligentData.value.detectionId)
    })
    .catch(e => proxy.$message.error('忽略失败'))
}
/**
 * @desc 忽略模态框取消
 *
 * **/
function ignoreCancel() {
  ignorevisible.value = false
}
</script>

<style scoped lang="less">
@import url(../../styles/themes);
@import url(~@/assets/styles/transition.less);

/deep/ .mz-panel-content-main {
  padding: 10px 1px 0 10px;
}

:deep(.mz-panel-content-main) {
  padding-left: 3px;
}

.detection {
  height: 100%;
  display: flex;
  width: 100%;
  flex-direction: column;

  .header-wrapper {
    display: flex;
    margin-bottom: 10px;

    .active {
      color: #266bf4 !important;
      font-weight: 700;
      transition: color 0.3s, background 0.3s, border-color 0.3s, box-shadow 0.3s;
    }

    .header-item {
      position: relative;
      flex: 1;
      display: flex;
      justify-content: center;
      height: 12px;
      line-height: 12px;
      font-size: 12px;
      font-weight: 500;
      border-right: 1px solid #c4c4c4;
      color: #333333;
      cursor: pointer;

      &:hover {
        color: #266bf4;
      }

      .text {
        flex: 1;
        height: 100%;
        white-space: nowrap;
        text-align: center;
      }

      .count {
        background: #fd8419;
        text-align: center;
        padding: 0 3px;
        min-width: 16px;
        line-height: 16px;
        border-radius: 10px;
        color: #fff;
        position: absolute;
        right: 0px;
        top: -9px;
      }
    }

    span:last-child {
      border-right: none;
    }
  }

  .content {
    height: calc(100% - 27px);
    width: 100%;
    position: relative;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;

    .content-rows {
      overflow: auto;
      width: 100%;
      height: 100%;

      .row:nth-child(even) {
        background-color: @row-even-bg;
      }

      .row:nth-child(odd) {
        background-color: @row-odd-bg;
      }

      .row {
        padding: 0.07rem 0 0.07rem 0.15rem;
        width: 100%;
        display: flex;
        align-items: center;
        cursor: pointer;
        /deep/ .ant-tag {
          padding: 0 0.04rem;
        }

        &:hover {
          background: @row-hover-bg;

          .content-box {
            white-space: normal !important;
            overflow: auto !important;
            transition: 0.3s;
          }
        }

        .content-box {
          flex: 1;
          margin-right: 8px;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
          word-wrap: break-word;
          word-break: break-all;
        }

        .svg-box {
          width: 20px;
          height: 20px;
          margin: 0 10px 3px 0;

          .aijc-car-collision {
            width: 17px;
            height: 17px;
          }
        }

        .row-text {
          flex: 1;
          font-size: 14px;

          line-height: 26px;
        }

        .row-operates-box {
          display: flex;
          align-items: center;
          width: 45px;
          height: 100%;
          margin-right: 6px;

          .btn {
            width: 100%;
            height: 23px;
            line-height: 18px;
            background: #edf3f9;
            border: 1px solid #266bf4;
            border-radius: 3px;
            font-size: 12px;
            text-align: center;
            color: #266bf4;
            padding: 0;
          }
        }

        .road-num {
          min-width: 55px;
          text-align: center;
        }
      }
    }

    .row-active {
      background: @row-active-bg !important;
    }

    .empty-box {
      height: 100%;

      .empty {
        height: 100%;
      }
    }
  }
  .content-shadow {
    box-shadow: 0px -0.01rem 0px 0rem #a3bbea;
  }
}

.footer-buttons {
  height: 28px;
  display: flex;
  justify-content: center;
  align-items: center;
  justify-content: center;
  margin-top: 8px;

  .model-button {
    width: 80px;
    height: 28px;
    border-radius: 4px;
    background: #ffffff;
    margin: 0 10px;
    padding: 0;
  }

  .model-button.model-confirm {
    border: 1px solid #377ee9;
    color: #266bf4;
  }

  .model-button.model-cancel {
    border: 1px solid #999999;
    border-radius: 4px;
  }
}

.tip-text {
  height: 60px;
  line-height: 60px;
}
</style>
